<template>
  <div class="base-divide-title"
       :style="{
         color: textColor,
         marginTop: mt + 'px',
         marginBottom: mb + 'px',
         fontWeight: textBold
      }">
    <div class="base-divide-title__text">
      <slot name="title">{{text}}</slot>
    </div>
    <span v-if="$slots.extra" class="base-divide-title__extra">
      <slot name="extra"></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'base-divide-title',
  props: {
    text: {
      type: String,
      default: '',
    },
    showExtra: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    marginTop: {
      type: String,
    },
    marginBottom: {
      type: String,
    },
    bold: {
      type: Boolean,
      default: true,
    },
    isGis: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    textColor() {
      return this.color || (this.isGis ? '#dcedf2' : '#23313E');
    },
    textBold() {
      if (this.isGis) return 400;
      return this.bold ? 600 : 400;
    },
    mt() {
      return this.marginTop || `${ (this.isGis ? 12 : 0) }`;
    },
    mb() {
      return this.marginBottom || `${ (this.isGis ? 16 : 0) }`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/design/colors";

.base-divide-title {
  font-size: 16px;
  position: relative;
  margin: 12px 0 8px 10px;

  &__text {
    position: relative;
    font-size: 16px;
    font-weight: inherit;

    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background-color: $color-primary;
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &__extra {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
  }
}
</style>
